import { 
  Col, 
  message, 
  Modal, 
  Row, 
  Space, 
  Form, 
  Input, 
  Switch, 
  Button,
  FormInstance
} from 'antd';
import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
import { Banner } from '..';
import { addApi, selectOneApi, updateApi } from '../services';

interface EditFormProps {
  id?: number;
  modalVisible: boolean;
  onCancel: () => void;
  onSuccess?: () => void;
}

const { TextArea } = Input;

const EditForm: React.FC<PropsWithChildren<EditFormProps>> = (props) => {
  const initialValues: Banner = {
    name: '',
    comment: '',
    status: 1,

  };

  const { modalVisible, onCancel, id, onSuccess } = props;
  const [form] = Form.useForm<Banner>();
  const [loading, setLoading] = useState(false);
  const [currentItem, setCurrentItem] = useState<Banner>(initialValues);

  useEffect(() => {
    if (modalVisible) {
      if (id) {
        selectOne();
      } else {
        form.resetFields();
        setCurrentItem(initialValues);
      }
    }
  }, [modalVisible, id]);

  const selectOne = async () => {
    setLoading(true);
    try {
      const res = await selectOneApi({id});
      if (res.code === 200) {
        const data = {
          ...res.data,
          status: Boolean(res.data.status)
        };
        setCurrentItem(data);
        form.setFieldsValue(data);
      }
    } catch (error) {
      message.error('获取详情失败');
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (values: Banner) => {
    setLoading(true);
    try {
      const submitData = {
        ...values,
        status: Number(values.status),
        ...(id ? { id } : {})
      };
      
      const submitFun = id ? updateApi : addApi;
      const res = await submitFun(submitData);
      
      if (res.code === 200) {
        message.success('提交成功');
        onCancel();
        onSuccess?.();
      }
    } catch (error) {
      message.error('提交失败');
    } finally {
      setLoading(false);
    }
  };

  const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
  };

  return (
    <Modal
      title={id ? "编辑" : "新建"}
      width={600}
      open={modalVisible}
      onCancel={onCancel}
      footer={null}
      destroyOnClose
    >
      <Form
        form={form}
        {...formItemLayout}
        layout="horizontal"
        initialValues={initialValues}
        onFinish={handleSubmit}
      >
        <Form.Item name="id" label="ID">
          <Input disabled />
        </Form.Item>

        <Form.Item
          name="name"
          label="名称"
          rules={[{ required: true, message: '请输入名称' }]}
        >
          <Input placeholder="请输入名称" />
        </Form.Item>



        <Form.Item
          name="status"
          label="状态"
          valuePropName="checked"
        >
          <Switch 
            checkedChildren="开启" 
            unCheckedChildren="关闭" 
          />
        </Form.Item>

        <Form.Item
          name="comment"
          label="描述"
        >
          <TextArea placeholder="请输入描述" rows={4} />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
          <Space>
            <Button onClick={onCancel}>
              取消
            </Button>
            <Button type="primary" htmlType="submit" loading={loading}>
              提交
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default EditForm;